<template>
    <div>
        <el-row>
            <view-top></view-top>
        </el-row>
        <div class="author-container">
            <el-row class="author-info">
                <el-col :span="6">
                    <div class="author-avatar">
                        <img :src="author.avatar" alt="作者头像" class="avatar">
                        <div class="author-name-honor">
                            <h2>{{ author.name }}</h2>
                            <p>荣誉：{{ author.honor }}</p>
                        </div>
                    </div>
                </el-col>
                <el-col :span="18">
                    <div class="author-details">
                        <p>代表作：{{ author.masterpiece }}</p>
                        <p>创作总字数：{{ wordTotal }}万字</p>
                    </div>
                </el-col>
            </el-row>
            <!-- 搜索结果 -->
            <div class="search-results" v-if="searchResults.length > 0">
                <div class="result-count">
                    共<span style="color: #fa6725"
                        >&nbsp{{ searchTotal }}&nbsp</span
                    >项相关的结果
                </div>
                <div
                class="result-item"
                v-for="(result, index) in searchResults"
                :key="index"
                >
                    <div class="result-cover">
                        <img :src="result.cover" alt="小说封面" @click="jumpToBook(index)" class="clickable-image"/>
                    </div>
                    <div class="result-details">
                        <h3 class="result-title" @mouseenter="titleIndex=index" @mouseleave="titleIndex=-1" @click="jumpToBook(index)" :class="{ 'active': index===titleIndex }">{{ result.title }}</h3>
                        <div class="result-meta">
                        <p class="result-author">作者：{{ result.author }}</p>
                        <p class="result-tags">
                            <span v-for="(tag, index) in result.tags" :key="index">
                            {{ tag }}
                            <span v-if="index < result.tags.length - 1">·</span>
                            </span>
                        </p>
                        <div class="result-meta2">
                            <p class="result-word-count">{{ result.total }}万字</p>
                            <p class="result-readers">·{{ result.watchNum }}人在读</p>
                        </div>
                        </div>
                        <p class="result-summary">简介：{{ result.introduction }}</p>
                        <div class="result-meta1">
                        <p class="result-chapter">最新更新：{{ result.lastChapter }}</p>
                        <p class="result-update">{{ result.updated }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<style scoped>
.author-container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.author-info {
    display: flex;
    align-items: center;
    margin-top: 20px;
    border: 1px solid #eaeaea;
    padding: 20px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.author-avatar {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.author-name-honor {
    display: flex;
    flex-direction: column;
}

.author-name-honor h2 {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.author-name-honor p {
    margin: 5px 0;
    font-size: 16px;
    color: #666;
}

.author-details {
    margin-left: 20px;
}

.author-details p {
    margin: 5px 0;
    font-size: 16px;
    color: #666;
}
/* 搜索结果样式 */
.result-count {
  line-height: 20px;
  display: flex;
  text-align: left;
  font-size: 14px;
  /* font-weight: bold; */
  margin-bottom: 10px;
}

.result-item {
  display: flex;
  align-items: center; /* 添加这一行，让图片和右边内容上下对齐 */
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.result-cover {
  transition: all .2s ease-in;
    transition-behavior: normal;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
    transition-delay: 0s;
    transition-property: all;
  flex: 0 0 100px;
  margin-right: 20px;
  position: relative; /* 添加相对定位，以便子元素可以绝对定位 */
}

.result-cover img {
  width: 120px; /* 修改图片宽度 */
  height: auto; /* 保持图片宽高比 */
}

.result-cover .result-details {
  position: absolute; /* 将内容绝对定位在封面上方 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 添加一个半透明的背景色 */
  color: white; /* 设置文字颜色为白色 */
  opacity: 0; /* 初始时内容不可见 */
  transition: all .2s ease-in; /* 添加过渡效果 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.result-title {
  font-size: 1.2em; /* 调整小说标题的字体大小 */
  font-weight: bold;
  margin-bottom: 0px;
  text-align: left; /* 居左对齐 */
  cursor: pointer; /* 设置鼠标指针样式为手形图标 */
}
.result-title.active {
  color: red; /* 点击时字体颜色变为红色 */
}
.result-info,
.result-summary,
.result-chapter,
.result-update {
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.4); /* 设置字体颜色为浅色 */
  text-align: left; /* 居左对齐 */
}
.result-summary {
  width: 80%;
  margin-top: 0px;
  margin-bottom: 25px;
}
.result-update {
  margin-left: 10px; /* 添加左边距，使章节和时间之间有一定间隔 */
}

.result-divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 20px 0;
}
.result-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px; /* 修改字体大小 */
  width: 66%;
  color: rgba(0, 0, 0, 0.4);
}
.result-meta2 {
  display: flex;
  /* align-items: center;
  font-size: 14px; /* 修改字体大小 */
  /* width: 66%;
  color: rgba(0, 0, 0, 0.4); */
}
.result-readers {
  /* align-items: center; */
  font-size: 14px; /* 修改字体大小 */
  color: rgba(0, 0, 0, 0.4);
}
.result-meta1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px; /* 修改字体大小 */
  width: 45%;
  margin-bottom: 10px;
}
.clickable-image {
  cursor: pointer; /* 设置鼠标指针样式为手形图标 */
}
</style>

<script>
import ViewTop from './ViewTop.vue';
export default {
    components: {
        ViewTop
    },
    created() {
        this.id = this.$route.query.authorId;
    },
    mounted() {
        this.getAuthor();
    },
    data() {
        return {
            id: null,
            author: {
                name: "s",
                honor: "金番作家",
                masterpiece: "代表作",
                avatar: "",
                totalWords: 0
            },
            searchResults: [],
            searchTotal: 0,
            titleIndex: -1,
        }
    },
    methods: {
        jumpToBook(bookId){
            var that=this
            this.$router.push(
                {
                    path:"/book",
                    query:{
                        book:JSON.stringify(that.searchResults[bookId])
                    }
                }
            )
        },
        getAuthor() {
            var that = this;
            this.axios({
                method: "get",
                url: "/user/author/list?id=" + this.id,
            }).then((res) => {
                that.author = res.data.data[0];
                console.log(that.author);
                that.searchBooks();
            }).catch((err) => {
                console.log(err);
            })
        },
        searchBooks() {
            var that=this
            // this.searchChange()
            let url="/user/novel/listAuthorBooks?author="+this.author.name
            this.axios({
                method: "get",
                url:url,
            }).then((res)=>{
                console.log(res.data.data)
                that.searchResults=res.data.data
                let total=0
                that.searchResults.forEach(result => {
                    total+=result.total
                });
                that.wordTotal=total
                that.searchResults.forEach(result => {
                if(result.introduction.length>100)
                    result.introduction = result.introduction.slice(0, 100) + '...';
                else
                    result.introduction = result.introduction;
                });
                that.searchTotal=res.data.data.length
                console.log(that.searchResults)
            }).catch((err)=>{
                console.log(err)
            })
        },
    }
}
</script>